body {
    width: 85%;
    margin: 0 auto;
}

h1 {
    text-align: center;
}

.flexbox {
    display: flex;
    background-color: rgb(184, 183, 183);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flexbox p {
    border: 1px red solid;
    border-radius: 5px;
    margin-left: 10px;
    flex-basis: 300px;
}

.flexbox p:last-child {
    margin-right: 10px;
}

.column {
    column-count: 3;
    /* column-width: 300px; */
    column-gap: 100px;
    column-rule: solid #ccc 4px;
}

.column-span {
    column-span: all;
}

.column p {
    border: 1px #ccc solid;
}

.break-avoid {
    break-inside: avoid;
}

.grid {
    display: grid;
    /* grid-template-columns: 200px 400px 200px; */
    /* grid-template-columns: 2fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-column-gap: 20px;
}

.grid p {
    text-align: center;
    border: 2px #aaa dashed;
}
